<template>
  <div class="table-toolbar">
    <el-button type="primary" :icon="Plus" @click="$emit('add')">
      新增
    </el-button>
    <el-button
      type="danger"
      :icon="Delete"
      :disabled="!hasSelected"
      @click="$emit('batch-delete')"
    >
      批量删除
    </el-button>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { Plus, Delete } from "@element-plus/icons-vue";

defineProps<{
  hasSelected: boolean;
}>();

defineEmits<{
  (e: "add"): void;
  (e: "batch-delete"): void;
}>();
</script>

<style lang="scss" scoped>
.table-toolbar {
  margin-bottom: 20px;

  .el-button {
    margin-right: 10px;
  }
}
</style>
